<template>
	<view>
		<view class="kuang">
			<view class="ping">
				<icon type="search" @click="search" size="18"/>
			<input type="text" v-model="sousuo"  placeholder="搜索场馆">
			</view>
			<view >
				<button @click="search" size="mini" type="primary">查询</button>
					<button class="chong" @click="chongzhi" size="mini" type="primary">重置</button>
			</view>
			
		
			</view>
			<!-- 下面为一块 1 -->
			<view v-for="(v,i) in showVenuesArr" :key="i">
			<!-- 大灰线 -->
			<view class="grey"></view>
		<view class="content" @click="xiangqing(v)">
			<view class="tu">
				<image :src="'/static/image-che/'+ v.venuesimg[0]" ></image>
			</view>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
			<!-- 右边内容 -->
			<view  class="kuan">
				<view class="tan">
					<view class="zi">{{v.venuesName}}</view>
					<view class="dizhi"><text class="zuo iconfont icon-dingwei"></text>距您{{v.vdistance}}</view>
				</view>
				<view class="tan">
					<view class="dizhi">地址: {{v.venuesAddress}}</view>
					<view><button :type="v.vyanse" size="mini">{{v.venuesType==1?'开放':'闭馆'}}</button></view>
				</view>
				<view class="tel">
					电话: {{v.venuesPhone}}
				</view>
			</view>
		</view>
		</view>

	</view>
</template>

<script>
	import {toRefs,reactive} from 'vue';
	import {onShow} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	import store from '../../store/index.js';
	export default {
	setup(){
		let data=reactive({
					// 	venuesArr:[{src:'https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png',venuename:'健身馆',address:'福州晋安区互动健身',tel:'15963565278',distance:'3.6km',type:'开放',yanse:'primary'},
				 // 		{src:'https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png',venuename:'游泳馆',address:'成都市高新区飞天游泳',tel:'15963547268',distance:'1km',type:'开放',yanse:'primary'},
					// 	{src:'https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png',venuename:'跑步馆',address:'北京市朝阳区互动健身',tel:'15680756982',distance:'1.6km',type:'闭馆',yanse:'primary'},
					// {src:'https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png',venuename:'杠铃馆',address:'上海市宝山区动乐健身',tel:'13896254169',distance:'0.8km',type:'开放',yanse:'primary'}],
					venuesArr:[],
					showVenuesArr:[],
					sousuo:"",
						xiangqing(v){
							uni.navigateTo({
								url: '/pages/Venue/VenueDetails?id='+v.venuesId
							});		
	},
	// 搜索场馆
	search(){
		if(data.search==""){
			data.showVenuesArr=data.venuesArr
		}else{
			data.showVenuesArr=[]
		data.venuesArr.forEach((v)=>{
			// console.log(v.venuesName)
		if(v.venuesName.includes(data.sousuo)){		
			data.showVenuesArr.push(v)
		}	
		else{
			console.log('没有符合查询规则的场馆')
		}
		})
		}
	},
	chongzhi(){
		data.showVenuesArr=data.venuesArr
		data.sousuo=""
	}
		});
	onShow(function(){
		if(data.sousuo==""){
				myRequest({
		url:'/getvenues'
	}).then((res)=>{
		// console.log(res)
		if(res.data.code==200){
			data.venuesArr=res.data.data
			store.commit('che/getVenuesArr',data.venuesArr,{root:true})
			data.venuesArr.forEach((item)=>{
				item.venuesimg=JSON.parse(item.venuesimg)
			})
			data.showVenuesArr=data.venuesArr
		
		}
	})
		}

	})
		return {...toRefs(data)}
	}
		}
</script>
<style lang="less" scoped>
	@import url('~@/static/font-che/iconfont.css');
.kuang{

	margin: 0 auto;
	// width: 650rpx;
	
	height: 90rpx;
	
	padding: 28rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	icon{
		margin-right: 20rpx;
		transform: translateY(5rpx);
		font-size: 28rpx;
	}
	.ping{
		display: flex;
		background-color: rgb(242,242,242);
		padding: 20rpx 40rpx 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	input,button{
		font-size: 28rpx;
	}
	.chong{
		margin-left: 10rpx;
	}

	
}
.grey{
	// width: 750rpx;
	height: 30rpx;
	background-color: rgb(242,242,242);
}
.content{
	display: flex;
	// justify-content: space-between;
	padding: 30rpx 20rpx;
}
.tu{
	width: 250rpx;
	height: 200rpx;
	margin-right: 20rpx;
	border-radius: 20rpx;
	image{
		width: 250rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
}
.kuan{
	flex: 1;
	cursor: pointer;
}
.zi{
	font-weight: 700;
}
.tan{
	display: flex;
	justify-content: space-between;
	margin-bottom: 28rpx;
	align-items: center;
}
.dizhi,.tel{
	font-size: 24rpx;
}
.zuo{margin-right: 10rpx;}
</style>
